import React from 'react';
import { inject, observer } from 'mobx-react';
import { withRouter, Route } from 'react-router-dom';
import { Avatar } from 'weaver-mobile';
import { ListPage, RouteLayout } from 'weaver-mobile-page';
import { toJS } from 'mobx';
import MeetingUtil from '../../../util/meetingUtil';
import NoData from '../../../public/NoData';
const Normal = ListPage.Normal; // Normal 为无路由的普通组件

@inject('viewMeetingStore')
@withRouter
@observer
class SignDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  componentDidMount() {

  }

  render() {
    const { signList, layout, setState } = this.props.viewMeetingStore;
    const { history } = this.props
    const mobileshowtemplate = {
      tpk1: [
        {
          key: 'col1',
          style: { flex: 'none',position:"absolute",display:"inline-block",height:"100%", top: "10%" },
          render(a) {
            return <Avatar userId={toJS(a).userId || ''} name={toJS(a).hrmName} url={toJS(a).url} />;
          },
        },
        {
          key: 'col2',
          style:{marginLeft: "50px"},
          configs: [
            { key: 'col2-row1', configs: [{ key: 'hrmName' }], style: { color: '#333' } },
            { key: 'col2-row2', configs: [{ key: 'dep' }] },
            { key: 'col2-row5', configs: [{ key: 'isMember' }] },
            { key: 'col2-row6', configs: [{ key: 'signStatus' }] },
          ],
        },
      ],
      tpk2: [
        {
          key: 'col1',
          style: { flex: 'none',position:"absolute",display:"inline-block",height:"100%", top: "10%" },
          render(a) {
            return <Avatar userId={toJS(a).userId || ''} name={toJS(a).hrmName} url={toJS(a).url} />;
          },
        },
        {
          key: 'col2',
          style:{marginLeft: "50px"},
          configs: [
            { key: 'col2-row1', configs: [{ key: 'hrmName' }], style: { color: '#333' } },
            { key: 'col2-row2', configs: [{ key: 'dep' }] },
            { key: 'col2-row6', configs: [{ key: 'isMember' }] },
            { key: 'col2-row7', configs: [{ key: 'signStatus' }] },
            { key: 'col2-row3', configs: [{ key: 'signTime' }] },
            { key: 'col2-row4', configs: [{ key: 'site', render(a) {
              return <a onClick={() => {
                setState({
                  position: [Number(a.latitude), Number(a.longitude)],
                  address:a.site
                }, history.push("/calendar/detail/sign/signMap"))
              }}><span className={'meeting-sign-address'} dangerouslySetInnerHTML={{ __html: a.site }}></span></a>
            } }] },
          ],
        },
      ],
      tpk3: [
        {
          key: 'col1',
          style: { flex: 'none',position:"absolute",display:"inline-block",height:"100%", top: "10%" },
          render(a) {
            return <Avatar userId={toJS(a).userId || ''} name={toJS(a).hrmName} url={toJS(a).url} />;
          },
        },
        {
          key: 'col2',
          style:{marginLeft: "50px"},
          configs: [
            { key: 'col2-row1', configs: [{ key: 'hrmName' }], style: { color: '#333' } },
            { key: 'col2-row2', configs: [{ key: 'dep' }] },
            { key: 'col2-row7', configs: [{ key: 'isMember' }] },
            { key: 'col2-row8', configs: [{ key: 'signStatus' }] },
            { key: 'col2-row3', configs: [{ key: 'signTime' }] },
            {
              key: 'col2-row4', configs: [{
                key: 'site', render(a) {
                  return <a onClick={() => {
                    setState({
                      position: [Number(a.latitude), Number(a.longitude)],
                      address:a.site
                    }, history.push("/calendar/detail/sign/signMap"))
                  }}><span className={'meeting-sign-address'} dangerouslySetInnerHTML={{ __html: a.site }}></span></a>
                }
              }]
            },
            { key: 'col2-row5', configs: [{ key: 'signBackTime' }] },
            {
              key: 'col2-row6', configs: [{
                key: 'backSite', render(a) {
                  return <a onClick={() => {
                    setState({
                      position: [Number(a.signbacklatitude), Number(a.signbacklongitude)],
                      address:a.backSite
                    }, history.push("/calendar/detail/sign/signMap"))

                  }}><span className={'meeting-sign-address'} dangerouslySetInnerHTML={{ __html: a.backSite }}></span></a>
                }
              }]
            },
          ],
        },
      ],
    };
    const signHeight = this.getHeight();
    return (
      <div style={{ height: "100%" }}>
        <div style={{ height: signHeight, overflowY: 'auto' }} className={'meeting-sign-detail-contain'}>
          {signList.data.length === 0 ? <NoData /> :
            <Normal
              template={mobileshowtemplate}
              store={signList}
            />}
        </div>
      </div>
    )
  }

  getHeight = () => {
    return document.body.clientHeight - MeetingUtil.getTabHeight();
  }

}

export default SignDetail;